<!-- Created by henian.xu on 2018/8/26. -->

<template>
    <Page :title="pageTitle">
        <Container>
            <Divider orientation="left">常用</Divider>
            <CellGroup>
                <Cell
                    label="标题"/>
                <Cell
                    label="标题"
                    extra="详细信息"/>
                <Cell
                    label="链接"
                    extra="详细信息"
                    to="/component/cell"/>
                <Cell
                    label="标题"
                    sub-label="副标题"
                    extra="详细信息"/>
                <Cell
                    label="徽章"
                    badge/>
                <Cell
                    label="禁用(link)"
                    extra="详细信息"
                    to="/component/cell"
                    link
                    disabled/>
                <Cell
                    icon="&#xf003;"
                    icon-class="tc-main"
                    label="综合应用"
                    extra="详细信息"
                    sub-label="副标题"
                    badge="+99"
                    link
                >
                    <Badge
                        label="999"
                        size="small"
                    />
                </Cell>
            </CellGroup>
            <Divider orientation="left">图标(边框)</Divider>
            <div class="pa-a">
                <CellGroup border>
                    <Cell
                        icon="&#xf003;"
                        label="标题"
                        extra="详细信息"/>
                    <Cell
                        icon="&#xf003;"
                        icon-class="tc-main"
                        label="标题"
                        sub-label="副标题"
                        extra="详细信息"/>
                </CellGroup>
            </div>
            <Divider orientation="left">位置</Divider>
            <CellGroup>
                <Cell
                    label="位置对换"
                    extra="详细信息"
                    reverse
                />
                <Cell
                    label="位置占比对换"
                    extra="详细信息"
                    flex-reverse
                />
                <Cell
                    label="位置对换"
                    sub-label="副标题"
                    extra="详细信息"
                    reverse
                    flex-reverse
                />
                <Cell
                    label="位置占比对换"
                    sub-label="副标题"
                    extra="详细信息"
                    flex-reverse
                />
            </CellGroup>
        </Container>
    </Page>
</template>

<script>
import pageMixin from '@/mixins/page';

export default {
    name: 'ListPage',
    mixins: [pageMixin],
    data() {
        return {};
    },
};
</script>

<style lang="scss" scoped>
</style>
